<template>
  <div id="project_details">
    <div class="rotation" ref="rotation" :style="{ height: fun.getPhoneEnv() == 3 ? '375px' : '100vw' }">
      <div class="top" :style="{ width: fun.getPhoneEnv() == 3 ? '375px' : '' }" :class="{ display: display }">
        <div class="left">
          <div class="little_icon" @click="goBack">
            <i class="iconfont icon-member-left" style="line-height: 1.5rem;"></i>
          </div>
        </div>
        <div class="right">
          <div class="little_icon" @click="gotoPage('home')">
            <i class="iconfont icon-ai-home"></i>
          </div>
          <div class="little_icon" style="margin-left: 0.47rem;" @click="gotoPage('member')">
            <i class="iconfont icon-wode-wode"></i>
          </div>
        </div>
      </div>
      <c-myswipe :style="{ height: fun.getPhoneEnv() == 3 ? '375px' : '100vw' }" :pagination-visible="true" :slides="project.banner_imgs" :repeating="true" :auto="0">
        <div v-for="(ithumb, index) in project.banner_imgs" :key="index">
          <template v-if="ithumb">
            <img :src="ithumb" width="100%" />
          </template>
        </div>
      </c-myswipe>
      <!--      <div style="width: 100%;padding-top: 2rem">-->
      <!--        <img :src="project.thumb" width="100%"/>-->
      <!--      </div>-->
    </div>
    <div class="project_title" v-if="project.title">
      <p>{{ project.title }}</p>
    </div>
    <!-- 服务门店 -->
    <div class="storeBox" :class="[store.length > 1 ? '' : 'sOnce']">
      <div class="title">
        <div class="line"></div>
        服务门店
      </div>
      <div class="sotreDetail">购买项目套餐后，即可服务门店核销项目！</div>
    </div>
    <div class="storeOnce" v-if="store.length == 1">
      <div class="storeOnceDetail" @click="toRouter(store[0].id)">
        <div class="detail">
          <div class="img">
            <img :src="store[0].thumb" alt="" />
          </div>
          <div class="detail_r">
            <div class="storeName">{{store[0].store_name}}</div>
            <div class="time">营业时间：{{ store[0].business_hours_start }}-{{ store[0].business_hours_end }}</div>
          </div>
        </div>
        <div class="loc">
          <div class="locTxt"><i class="iconfont icon-order_locate"></i>{{ store[0].address }}</div>
          <div class="locDist">{{ store[0].distance }}{{ store[0].unit }}</div>
        </div>
      </div>
    </div>
    <div class="storeList" v-if="store.length > 1">
      <div class="sotrelis" v-for="item in store" :key="item.id" @click="toRouter(item.id)">
        <div class="storeTop">
          <div class="image">
            <img :src="item.thumb" alt="" />
          </div>
          <div class="storeDetail">
            <div class="top">
              <div class="title">{{ item.store_name }}</div>
              <div class="iconStore">
                <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images/project_details_shop@2x.png" alt="" />
              </div>
            </div>
            <div class="bottom">
              <div class="time">营业时间:{{ item.business_hours_start }}-{{ item.business_hours_end }}</div>
              <div class="loc">{{ item.distance }}{{ item.unit }}</div>
            </div>
          </div>
        </div>
        <div class="sotreBottom">
          <!-- <div class="locicon"></div> -->
          <i class="iconfont icon-icon_location"></i>
          <div class="locDetail">{{ item.address }}</div>
        </div>
      </div>
      <div class="storeMore" @click.stop="MoreStore" v-if="storeLast.current_page < storeLast.last_page">查看更多<van-icon name="arrow-down" /></div>
    </div>
    <!-- 商品 -->
    <div class="storeBox">
      <div class="title">
        <div class="line"></div>
        商品
      </div>
      <div class="goodslis" v-for="item in goods" :key="item.id" @click="goGoodsBtn(item.id)">
        <div class="img">
          <img :src="item.thumb" alt="" />
        </div>
        <div class="right">
          <div class="title">{{ item.title }}</div>
          <div class="rightBottom">
            <div class="price">{{ $i18n.t("money") }}{{ item.price }}</div>
            <div class="saleNum">已售{{ item.show_sales }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="evaluateBox">
      <div class="title">
        <div class="line"></div>
        评价
      </div>
      <div class="evaRight">查看全部 ({{ commentListtotal }})<van-icon name="arrow" /></div>
    </div>
    <div class="evaluate">
      <ul>
        <li v-for="(item, index) in commentList" :key="index">
          <div class="evaluate_top">
            <div class="evaluate_left" v-if="item.head_img_url">
              <img :src="item.head_img_url" alt="" />
            </div>
            <div class="evaluate_right">
              <div class="top">
                <div class="left">
                  <div class="name">{{ item.nick_name }}</div>
                  <div class="stella">
                    <van-rate color="#FF9600" v-model="item.project_level" readonly style="text-align: left;" :size="14" />
                    <div class="right">{{ item.created_at }}</div>
                  </div>
                </div>
              </div>
              <div class="bottom">
                <div class="assess">{{ item.content }}</div>
                <div class="picture">
                  <div class="picture_li" v-for="(itemChildren, indexChildren) in item.images" :key="indexChildren">
                    <img :src="itemChildren" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="evaluate_bottom">
            <div class="many_reply" v-if="item.has_many_reply && item.has_many_reply.length > 0">
              <div v-for="items in item.has_many_reply" :key="items.id">
                <p style="padding: 0.5rem 1rem; text-align: left;">追加评论： {{ items.content }}</p>
                <div class="imgflex">
                  <div v-for="(val, index) in items.images" :key="index">
                    <div class="photobox">
                      <img :src="val" style="width: 100%; height: 100%; object-fit: contain;" />
                    </div>
                  </div>
                </div>
                <div class="comment-time" style="text-align: left;">{{ items.created_at }}</div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div style="margin-top: 1rem;">
      <p style="" class="title-text">商品详情</p>
      <div style="padding: 0.9375rem; background: #fff;" v-html="project.content"></div>
    </div>
    <!-- <div class="project_list">
      <van-tabs v-model="active" title-active-color="#f49f19" animated sticky color="#f49f19" @change="tabDataBtn">
        <van-tab title="详情">
          <div class="goods_content" v-html="project.content"></div>
        </van-tab>
        <van-tab title="商品">
          <div class="goodsList">
            <ul>
              <li v-for="(item, index) in goods" :key="index" @click="goGoodsBtn(item.id)">
                <div class="goods_left">
                  <img :src="item.thumb" alt="" />
                </div>
                <div class="goods_right">
                  <div class="goods_name" style="-webkit-box-orient: vertical">
                    {{ item.title }}
                  </div>
                  <div class="goods_message">
                    <div class="left">{{ $i18n.t("money") }}{{ item.price }}</div>
                    <div class="right">已售{{ item.show_sales }}</div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </van-tab>
        <van-tab title="评价">
          <div class="evaluate">
            <ul>
              <li v-for="(item, index) in commentList" :key="index">
                <div class="evaluate_top">
                  <div class="evaluate_left" v-if="item.head_img_url">
                    <img :src="item.head_img_url" alt="" />
                  </div>
                  <div class="evaluate_right">
                    <div class="top">
                      <div class="left">
                        <div class="name">{{ item.nick_name }}</div>
                        <div class="stella">
                          <van-rate v-model="item.project_level" readonly style="text-align: left" :size="14" />
                        </div>
                      </div>
                      <div class="right">{{ item.created_at }}</div>
                    </div>
                    <div class="bottom">
                      <div class="assess">{{ item.content }}</div>
                      <div class="picture">
                        <div class="picture_li" v-for="(itemChildren, indexChildren) in item.images" :key="indexChildren">
                          <img :src="itemChildren" alt="" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="evaluate_bottom">
                  <div class="many_reply" v-if="item.has_many_reply && item.has_many_reply.length > 0">
                    <div v-for="items in item.has_many_reply" :key="items.id">
                      <p style="padding: 0.5rem 1rem; text-align: left">追加评论： {{ items.content }}</p>
                      <div class="imgflex">
                        <div v-for="(val, index) in items.images" :key="index">
                          <div class="photobox">
                            <img :src="val" style="width: 100%; height: 100%; object-fit: contain" />
                          </div>
                        </div>
                      </div>
                      <div class="comment-time" style="text-align: left">{{ items.created_at }}</div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </van-tab>
        <van-tab :title="appointmentLang.service + '门店'">
          <ul class="store_list">
            <li v-for="(item, index) in store" :key="index" @click="toRouter(item.id)">
              <div class="store_list_left">
                <img :src="item.thumb" alt="" />
              </div>
              <div class="store_list_right">
                <div class="top">
                  <div class="name">{{ item.store_name }}</div>
                  <div class="distance">{{ item.distance }}km</div>
                </div>
                <div style="display: flex">
                  <span class="time">营业时间:{{ item.business_hours_start }}-{{ item.business_hours_end }}</span>
                  <div class="consult">咨询</div>
                </div>
                <div style="-webkit-box-orient: vertical" class="address">
                  <i class="iconfont icon-icon_location" style="font-size: 14px; color: #f4a82e"></i>
                  {{ item.address }}
                </div>
              </div>
            </li>
          </ul>
        </van-tab>
      </van-tabs>
    </div> -->
  </div>
</template>

<script>
import project_details_controller from "./project_details_controller";

export default project_details_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
#project_details {
  .project_title {
    background: #fff;
    padding: 0.875rem 0.9375rem;
    font-weight: bold;
    line-height: 1.5rem;
    font-size: 0.9375rem;
    text-align: left;
    color: #333;
    margin-bottom: 0.625rem;

    p {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      word-break: break-all;
    }
  }
  .storeOnce {
    padding: 1.13rem 0.73rem 1.25rem 0.73rem;
    box-sizing: border-box;
    background: #fff;
    margin-bottom: 0.31rem;
    .storeOnceDetail {
      border-radius: 0.5rem;
      box-shadow: 0rem 0.09rem 0.56rem 0.03rem rgba(169, 169, 169, 0.24);
      padding: 0.63rem 0.75rem 1.03rem 0.66rem;
      .detail {
        display: flex;
        .detail_r {
          text-align: left;
          .storeName {
            font-size: 0.94rem;
            color: #000000;
            line-height: 1.5rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .time {
            font-size: 0.75rem;
            color: #6e6e79;
            line-height: 1rem;
          }
        }
        .img {
          width: 2.75rem;
          height: 2.75rem;
          border-radius: 0.63rem;
          margin-right: 0.5rem;
          img {
            width: 100%;
            height: 100%;
            border-radius: 0.63rem;
          }
        }
      }
      .loc {
        margin-top: 0.8rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.75rem;
        .locTxt {
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: #6e6e79;
          text-align: left;
          margin-right: 1rem;
          .iconfont {
            color: #6e6e79;
          }
        }
        .locDist {
          flex-shrink: 0;
          color: #6e6e79;
        }
      }
    }
  }
  .storeList {
    margin-bottom: 0.625rem;
    margin-top: 0.5625rem;
    padding-left: 0.625rem;
    overflow-x: scroll;
    display: flex;

    .storeMore {
      font-size: 0.625rem;
      color: #8c8c8c;
      font-weight: 400;
      line-height: 0.8rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-right: 1rem;
    }

    .sotrelis {
      background: #fff;
      width: 15.625rem;
      height: 4.8438rem;
      padding: 0.9375rem 0.625rem;
      border-radius: 0.4688rem;
      margin-right: 0.625rem;
      flex-shrink: 0;

      .sotreBottom {
        font-size: 0.625rem;
        font-weight: 400;
        text-align: left;
        display: flex;
        align-items: center;
        font-size: 0.625rem;

        .iconfont {
          font-size: 0.4375rem;
          color: #aaa;
          margin-top: 0.3563rem;
        }

        .locDetail {
          color: #333;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-top: 0.525rem;
        }
      }

      .storeTop {
        display: flex;

        .storeDetail {
          width: 100%;
          display: flex;
          flex-direction: column;
          margin-left: 0.375rem;

          .top {
            width: 100%;
            display: flex;
            justify-content: space-between;

            .title {
              font-size: 0.75rem;
              color: #202020;
              text-align: left;
            }

            .iconStore {
              width: 0.8125rem;
              height: 0.75rem;

              img {
                width: 100%;
                height: 100%;
              }
            }
          }

          .bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex: 1;

            .time {
              font-size: 0.625rem;
              color: #999;
            }

            .loc {
              font-size: 0.625rem;
              color: #999;
            }
          }
        }

        .image {
          background: #999;
          flex-shrink: 0;
          width: 2rem;
          height: 2rem;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  .goodslis {
    padding: 0.8438rem 0;
    display: flex;

    .img {
      flex-shrink: 0;
      width: 3.75rem;
      height: 3.75rem;
      margin-right: 0.5625rem;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .right {
      flex: 1;
      overflow: hidden;

      .title {
        text-align: left;
        font-size: 0.875rem;
        color: #202020;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .rightBottom {
        display: flex;
        justify-content: space-between;
        margin-top: 0.625rem;

        .price {
          font-size: 0.9375rem;
          font-weight: 400;
          color: #f14e4e;
        }

        .saleNum {
          font-size: 0.6875rem;
          color: #8b8b8b;
          font-weight: 400;
        }
      }
    }
  }

  .storeBox {
    padding: 0.75rem 0.9375rem;
    background: #fff;
    margin-bottom: 0.625rem;

    .sotreDetail {
      font-size: 0.75rem;
      color: #575757;
      text-align: left;
      width: 100%;
    }

    .title {
      font-size: 0.9375rem;
      color: #202020;
      display: flex;
      align-items: center;

      .line {
        width: 0.125rem;
        height: 0.8125rem;
        background: #ce811d;
        border-radius: 0.0625rem;
        margin-right: 0.4375rem;
      }
    }
  }
  .sOnce {
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .rotation {
    width: 100%;

    .top {
      position: fixed;
      width: 100%;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.6rem;

      /* background: #FFFFFF; */
      .little_icon {
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        background-color: #000;
        opacity: 0.3;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        color: #fff;
      }

      .left {
        margin-left: 0.78rem;
      }

      .right {
        display: flex;
        align-items: center;
        margin-right: 0.5rem;
      }
    }

    .display {
      display: none;
    }

    img {
      width: 100%;
    }
  }

  .project_list {
    background: #fff;
    min-height: 100vh;

    .goods_content {
      padding: 0.5rem 1rem;
    }

    .goodsList {
      ul {
        li {
          padding: 0.5rem;
          display: flex;

          .goods_left {
            width: 5.06rem;
            height: 5.06rem;
            border-radius: 0.38rem;

            img {
              width: 5.06rem;
              height: 5.06rem;
            }
          }

          .goods_right {
            flex: 1;
            background: #fff;
            padding: 0.5rem;

            .goods_name {
              line-height: 1.2rem;
              font-size: 1rem;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              padding-left: 0.63rem;
              text-align: left;
              margin-bottom: 0.4rem;
            }

            .goods_message {
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-left: 0.63rem;

              .left {
                font-size: 1rem;
                line-height: 1.5rem;
                color: #ffac27;
              }

              .right {
                font-size: 0.8rem;
                line-height: 1.5rem;
                color: #ccc;
              }
            }
          }
        }
      }
    }

    .store_list {
      li {
        display: flex;
        padding: 0.59rem 1.16rem 0.63rem 0.63rem;
        border-bottom: 1px solid #f2f2f7;

        .store_list_left {
          width: 5.53rem;
          height: 5.03rem;

          img {
            width: 5.53rem;
            height: 100%;
          }
        }

        .store_list_right {
          margin-left: 0.63rem;

          .top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 0.56rem;
            margin-bottom: 0.4rem;
            font-size: 14px;

            .name {
              font-size: 16px;
              line-height: 1.5rem;
              height: 1.5rem;
              color: #333;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              width: 12rem;
              text-align: left;
            }

            .distance {
              line-height: 1.5rem;
              height: 1.5rem;
              color: #ccc;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              width: 4rem;
            }
          }

          .time {
            text-align: left;
            line-height: 1.5rem;
            color: #666;
            flex: 1;
          }

          .address {
            text-align: left;
            line-height: 1.2rem;
            color: #f4a82e;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;

            /* -webkit-line-clamp: 2; */
          }

          .consult {
            color: #fff;
            width: 2.81rem;
            height: 1.38rem;
            background-color: #f4a82e;
            border-radius: 0.69rem;
            text-align: center;
            line-height: 1.38rem;
            flex: 0 0 3rem;
            margin-right: 0.5rem;
          }
        }
      }
    }
  }
}

.evaluateBox {
  padding: 0.75rem 0.9375rem;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .evaRight {
    display: flex;
    align-items: center;
    font-size: 0.6875rem;
    font-weight: 400;
    color: #f14e4e;
  }

  .title {
    font-size: 0.9375rem;
    color: #202020;
    display: flex;
    align-items: center;

    .line {
      width: 0.125rem;
      height: 0.8125rem;
      background: #ce811d;
      border-radius: 0.0625rem;
      margin-right: 0.4375rem;
    }
  }
}

.evaluate {
  padding: 0 0.9375rem;
  background: #fff;

  ul {
    li:first-child {
      padding-top: 0;
    }

    li {
      padding-top: 0.9375rem;

      .evaluate_top {
        padding-top: 0.41rem;
        display: flex;

        .evaluate_left {
          width: 2rem;
          height: 2rem;

          img {
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
          }
        }

        .evaluate_right {
          flex: 1;
          padding-left: 0.5rem;

          .top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 0.09rem;

            .left {
              flex: 1;

              .name {
                max-width: 5rem;
                font-size: 0.6875rem;
                line-height: 1rem;
                height: 1rem;
                text-align: left;
                color: #7b7b7b;
                background-color: transparent;
                overflow: hidden; /* 超出部分隐藏 */
                text-overflow: ellipsis; /* 超出部分显示省略号 */
                white-space: nowrap; /* 规定段落中的文本不进行换行 */
              }

              .stella {
                width: 100%;
                display: flex;
                justify-content: space-between;
              }
            }

            .right {
              line-height: 1rem;
              height: 1rem;
              font-size: 0.625rem;
              color: #999;
            }
          }

          .bottom {
            margin-top: 0.7188rem;

            .assess {
              font-size: 0.75rem;
              font-weight: 400;
              text-align: left;
              line-height: 0.94rem;
              max-height: 3.76rem;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 4;
              overflow: hidden;
              color: #4c4c4c;
              padding-bottom: 0.69rem;
            }

            .picture {
              display: flex;
              flex-wrap: wrap;
              margin-bottom: 1.25rem;

              .picture_li {
                width: 4.31rem;
                height: 4.31rem;

                img {
                  width: 4.31rem;
                  height: 4.31rem;
                }
              }
            }
          }
        }
      }

      .evaluate_bottom {
        .many_reply {
          padding: 0 1rem;

          .comment-time {
            font-size: 14px;
            color: #999;
            padding: 0.5rem 0.875rem;
          }

          .imgflex {
            display: flex;
            flex-wrap: wrap;
            padding: 0 0.875rem;

            .photobox {
              position: relative;
              width: 4.938rem;
              height: 4.938rem;
              background-color: #fcfcfc;
              border-radius: 0.156rem;
              border: solid 0.031rem #ccc;
              overflow: hidden;
              margin-right: 0.25rem;
              margin-bottom: 0.25rem;
            }
          }
        }
      }
    }
  }
}

.title-text {
  display: block; /* 设置为块级元素会独占一行形成上下居中的效果 */
  position: relative; /* 定位横线（当横线的父元素） */
  color: #999; /* 居中文字的颜色 */
  text-align: center;
  font-weight: 400;
  padding: 0.875rem 5rem;
  background: #fff;
}

.title-text::before,
.title-text::after {
  content: "";
  position: absolute; /* 定位背景横线的位置 */
  top: 50%;
  background: #ccced0; /* 背景横线颜色 */
  width: 20%; /* 单侧横线的长度 */
  height: 1px;
}

.title-text::before {
  left: 15%; /* 调整背景横线的左右距离 */
}

.title-text::after {
  right: 15%;
}
</style>
